{{ define "template/search.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>{{.Title}}</title>
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script>
    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="/css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
{{template "template/navigation.html" .}}
<!-- Page Header-->
<header class="masthead" style="background-image: url('/assets/img/home-bg.jpg')">
    <div class="container position-relative px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
                <div class="site-heading">
                    <h1 style="margin-bottom: 10px">My Blogo</h1>
                    <div class="input-group mb-3 input-group-lg">
                        <input id="title" type="text" class="form-control" placeholder="输入标题关键字进行查询" aria-label="Recipient's username" aria-describedby="button-addon2">
                        <div class="input-group-append">
                            <button id="query" class="btn btn-outline-light" type="button" id="button-addon2" onclick="queryBlogsByTitle()">查询</button>
                        </div>
                    </div>

                    <div id="liveAlertPlaceholder"></div>

                    <div>
                        <h2>分类</h2>
                        {{range .Categories }}
                        <a class="badge rounded-pill {{color .CategoryId}}" href="/blog/query/1/10?keywords={{.CategoryName}}&method=2">{{.CategoryName}}</a>
                        {{end}}
                        <hr class="my-4" />
                        <h2>标签</h2>
                        {{range .Tags }}
                        <a class="badge rounded-pill {{color .TagId}}" href="/blog/query/1/10?keywords={{.TagName}}&method=3">{{.TagName}}</a>
                        {{end}}
                    </div>

                </div>
            </div>
        </div>
    </div>
</header>

<div class="container px-4 px-lg-5">
    <div class="row gx-4 gx-lg-5 justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7">
            {{ range .Blogs }}
            <!-- Post preview-->
            <div class="post-preview">
                <a href="{{.BlogSubUrl }}">
                    <h2 class="post-title">{{ .BlogTitle }}</h2>
                    <h3 class="post-subtitle">{{ .BlogSummary}}</h3>
                </a>
                <p class="post-meta">
                    Posted by
                    <a href="/blog/4/detail">{{ .AuthorName }}</a>
                    {{ .CreateTimeStr }}
                </p>
            </div>
            <!-- Divider-->
            <hr class="my-4" />
            {{end}}

            <!-- Pager-->
            {{ if gt .Total 0 }}
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link disabled">第 {{.Page}} 页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link disabled">共 {{.Total}} 条</a>
                    </li>
                    {{ if gt .Page 1 }}
                    <li class="page-item">
                        <a class="page-link" href="/blog/query/{{ sub .Page}}/10?keywords={{.Keywords}}&method={{.Method}}" aria-label="Previous">
                            <span aria-hidden="true">上一页&laquo;</span>
                        </a>
                    </li>
                    {{ end }}
                    {{ if isMaxPage .Page 10 .Total | not  }}
                    <li class="page-item">
                        <a class="page-link" href="/blog/query/{{ add .Page}}/10?keywords={{.Keywords}}&method={{.Method}}" aria-label="Next">
                            <span aria-hidden="true">下一页&raquo;</span>
                        </a>
                    </li>
                    {{end}}
                </ul>
            </nav>
            {{ end}}

        </div>
    </div>
</div>
<!-- Footer-->
{{ template "template/footer.html" .}}

<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="/js/scripts.js"></script>
<script>
    window.onload = () => {
        alert(`加载成功`, "success")
        let alertTrigger = document.getElementById('query')

        function alert(message, type) {
            let alertPlaceholder = document.getElementById('liveAlertPlaceholder')
            let wrapper = document.createElement('div')
            if (type === "info") {
                wrapper.innerHTML = `<div class="alert alert-${type} alert-dismissible" role="alert">
                                    ${message}
                                    <div class="spinner-border text-info" role="status">
                                      <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                 </div>`
            } else {
                wrapper.innerHTML = `<div class="alert alert-${type} alert-dismissible" role="alert">
                                    ${message}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                 </div>`
            }

            alertPlaceholder.append(wrapper)
        }

        if (alertTrigger) {
            alertTrigger.addEventListener("click", () => {
                let keywords = document.getElementById("title").value
                let method = 1
                alert("正在加载中", "info")
                window.location = `/blog/query/1/10?keywords=${keywords}&method=${method}`
            })
        }



    }




</script>
</body>
</html>


{{end}}